<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>RST_WebSDkDemo</title>
    <link rel="stylesheet" href="css/index.css"/>
    <link href="css/bootstrap.css" rel="stylesheet"/>
    <link href="css/jquery.treeview.css" rel="stylesheet"/>
    <link href="css/jquery-ui.min.css" rel="stylesheet">
    <style>
        a,p,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,span {
            margin:0;
            padding:0;
            border:0;
            list-style:none;
        }

        .active {
            background: #A5B7CB;
        }

        table tr:nth-child(odd){
            background: #fff;
        }

        table tr:nth-child(even){
            background: #EAF3FC;
        }

        table {
            table-layout: fixed;
        }

        table tr th, table tr td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: default;
        }

        .table-bordered > thead > tr > th {
            border-right: 1px solid #BEC3CB;
        }

        .table-active {
            background: #B4C9E9;
        }

        /*右键视频回放下载等*/
        #tb_menu{
            width: 120px;
            height: 90px;
            background-color: #fff;
            border: 1px solid #868689;
            text-align: center;
            position: absolute;
            left: 0;
            top:0;
            display: none;
        }

        /*右键暂停开始*/
        #load_menu{
            width: 140px;
            height: 120px;
            background-color: #fff;
            border: 1px solid #868689;
            text-align: center;
            position: absolute;
            left: 0;
            top:0;
            /*display: none;*/
        }
    </style>

    <!--视频播放窗口-->
    <style>
        a, span {
            outline: none;
        }
        p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        html, body {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
        #dragVideo {
            cursor: default;
            font-size: 12px;
            position: absolute;
            width: 590px;
            height: 555px;
            border: 2px solid #364E6F;
        }

        div.dragVideo_header div {
            position: absolute;
            right: 5px;
            top:2px;
        }

        div.dragVideo_header div a {
            float: left;
            margin-left: 5px;
            cursor: default;
            display: inline-block;
            width: 16px;
            height: 16px;
        }

        a.dragVideo_close {
            background: url("Image/queryImage/CaptionButton16.png") no-repeat 0px 0px;
        }

        a.dragVideo_close:hover {
            background: url("Image/queryImage/CaptionButton16.png") no-repeat -16px 0px;
        }

        a.dragVideo_close:active {
            background: url("Image/queryImage/CaptionButton16.png") no-repeat -32px 0px;
        }

        div.dragVideo_bottom div.bottom_butt a.butt_frond {
            cursor: default;
            display: inline-block;
            width: 32px;
            height: 32px;
        }

        div.dragVideo_bottom div.bottom_butt a.butt_later {
            cursor: default;
            display: inline-block;
            width: 16px;
            height: 16px;
        }

        div.dragVideo_bottom div.bottom_butt a.butt_volume {
            cursor: default;
            display: inline-block;
            width: 100px;
            height: 4px;
        }

        a.butt_playOrPause {
            background: url("Image/queryImage/PlayerList32.png") no-repeat -96px 0px;
        }

        a.butt_playOrPause:hover {
            background: url("Image/queryImage/PlayerList32.png") no-repeat -128px 0px;
        }

        a.butt_playOrPause:active  {
            background: url("Image/queryImage/PlayerList32.png") no-repeat -160px 0px;
        }

        a.butt_pauseToPlay {
            background: url("Image/queryImage/PlayerList32.png") no-repeat  0px 0px;
        }

        a.butt_pauseToPlay:hover {
            background: url("Image/queryImage/PlayerList32.png") no-repeat -32px 0px;
        }

        a.butt_pauseToPlay:active  {
            background: url("Image/queryImage/PlayerList32.png") no-repeat -64px 0px;
        }

        a.butt_volumeMute {
            background: url("Image/queryImage/PlayerList16.png") no-repeat -240px 0px;
        }

        a.butt_volumeMute:hover {
            background: url("Image/queryImage/PlayerList16.png") no-repeat -256px 0px;
        }

        a.butt_volumeMute:active {
            background: url("Image/queryImage/PlayerList16.png") no-repeat -272px 0px;
        }

        a.butt_volumeMax {
            background: url("Image/queryImage/PlayerList16.png") no-repeat -288px 0px;
        }

        a.butt_volumeMax:hover {
            background: url("Image/queryImage/PlayerList16.png") no-repeat -304px 0px;
        }

        a.butt_volumeMax:active {
            background: url("Image/queryImage/PlayerList16.png") no-repeat -320px 0px;
        }

        a.butt_volumeControl {
            background: url("Image/queryImage/VolumeBar.png") no-repeat 0px 0px;
        }

        a.butt_volumeButt {
            cursor: default;
            display: inline-block;
            width: 18px;
            height: 18px;
        }

        a.butt_volumeControlButt {
            background: url("Image/queryImage/VolumeThumb.png") no-repeat 0px 0px;
        }
    </style>
</head>
<body>
<div class="body">
    <div class="userInfo" style="min-width: 1192px;">
        <span>地址:</span>
        <input id="ip" name="ip"/>
        <span>端口:</span>
        <input id="port" name="port"/>
        <span>用户名:</span>
        <input id="userName" name="userName"/>
        <span>密码:</span>
        <input id="pwd" name="pwd"/>
        <button id="login" style="width: 80px; margin-left: -6px;">登录</button>
    </div>

    <div class="serviceInfo" style="min-width: 1790px;">
    <div class="service">
        <div style="">设备列表</div>
        <div class="treeManage" style="margin-top: 20px;">
            <div id="resourceTree" class="resourceTree filetree"></div>
            <div id="resourceTreeFrond" class="resourceTreeFrond filetree"></div>
        </div>

    </div>

    <div style="min-width: 1490px;">
        <ul class="opeNav" style="display: inline-block; margin-left: 5px; cursor: pointer;">
            <li class="previewLi active" href="preview" style="float: left; padding: 3px 10px; border: 1px solid #A5B7CB;"
                onclick="WebPreview.previewClick();">实时指挥</li>
            <li class="queryLi" href="query" style="float: left; padding: 3px 10px; border: 1px solid #A5B7CB; margin-left: 10px;"
                onclick="WebQuery.queryClick();">查询回放</li>
            <li class="playbackLi" href="previewPlayback" style="float: left; padding: 3px 10px; border: 1px solid #A5B7CB; margin-left: 10px;"
                onclick="WebPreview.previewPlaybackClick();">实时回放</li>
            <li class="chatMsgLi" href="chatMsg" style="float: left; padding: 3px 10px; border: 1px solid #A5B7CB; margin-left: 10px;"
                onclick="WebPreview.chatMsgClick()">即时会话</li>
        </ul>

        <!--实时指挥-->
        <div class="preview" style="display: block; margin-top: 13px;">
            <div class="video_window">
                <div class="video_window_items">
                    <div class="video_window_item">
                        <div class="video videoWnd_selected" id="video11">
                        </div>
                    </div>
                    <div class="video_window_item">
                        <div class="video" id="video12">
                        </div>
                    </div>
                    <div class="video_window_item">
                        <div class="video" id="video13">
                        </div>
                    </div>
                    <div class="video_window_item">
                        <div class="video" id="video14">
                        </div>
                    </div>
                </div>
                <div class="video_window_items">
                    <div class="video_window_item">
                        <div class="video" id="video21">
                        </div>
                    </div>
                    <div class="video_window_item">
                        <div class="video" id="video22">
                        </div>
                    </div>
                    <div class="video_window_item">
                        <div class="video" id="video23">
                        </div>
                    </div>
                    <div class="video_window_item">
                        <div class="video" id="video24">
                        </div>
                    </div>
                </div>
                <div class="video_window_items">
                    <div class="video_window_item">
                        <div class="video" id="video31">
                        </div>
                    </div>
                    <div class="video_window_item">
                        <div class="video" id="video32">
                        </div>
                    </div>
                    <div class="video_window_item">
                        <div class="video" id="video33">
                        </div>
                    </div>
                    <div class="video_window_item">
                        <div class="video" id="video34">
                        </div>
                    </div>
                </div>
                <div>定位信息</div>
                <textarea class="location_info" id="location_info" readonly="readonly">
                    </textarea>
            </div>

            <div class="play_param" style="width: 260px;float: right;margin-top: -825px;">
                <div class="play_tool">
                    <div class="play_tool_item" style="">
                        <input class="closeView" type="button" value="关闭" onclick="WebPreview.StopVideo()">
                        <input class="audio" type="button" value="音频" onclick="WebPreview.ClickAudioRes()">
                        <input class="talk" type="button" value="对讲" onclick="WebPreview.ClickTalkbackRes()">
                        <input class="location" type="button" value="定位" onclick="WebPreview.ClickLocationRes()">
                        <input class="snapShot" type="button" value="本地抓拍" onclick="WebPreview.LocalSnapshot()">
                    </div>
                    <div class="play_tool_item">
                        <input class="top" type="button" value="向上" onmousedown="WebPreview.StartTurePtz(WebPreview.PtzTureType.PTZ_TURN_UP)"
                               onmouseup="WebPreview.StopTurePtz()">
                        <input class="bottom" type="button" value="向下" onmousedown="WebPreview.StartTurePtz(WebPreview.PtzTureType.PTZ_TURN_DOWN)"
                               onmouseup="WebPreview.StopTurePtz()">
                        <input class="left" type="button" value="向左" onmousedown="WebPreview.StartTurePtz(WebPreview.PtzTureType.PTZ_TURN_LEFT)"
                               onmouseup="WebPreview.StopTurePtz()">
                        <input class="right" type="button" value="向右" onmousedown="WebPreview.StartTurePtz(WebPreview.PtzTureType.PTZ_TURN_RIGHT)"
                               onmouseup="WebPreview.StopTurePtz()">
                        <input class="record" type="button" value="本地录像" onclick="WebPreview.LocalRecord()">
                    </div>
                </div>

                <div style="margin-bottom: 2%; margin-left: 10px;">
                    <input class="callUserTalk" type="button" value="语音通话" onclick="WebPreview.CallUserTalk()" style="width: 95px;">
                </div>

                <div style="margin-bottom: 2%; margin-left: 10px;">
                    <input class="platformStorage" type="button" value="手动开启平台录像" onclick="WebPreview.ManualStartOrStopStorage()">
                </div>

                <div class="paramSet">
                    <div>系统参数设置</div>
                    <div style="border:1px solid grey; height: 100px; width: 200px;">
                        <p class="definition">
                            <span style="margin-left:5px;">清晰度:</span>
                            <input type="number" id="def" min="1" max="100" name="def" onkeyup="WebPreview.limitInput(this);"
                                   style="margin-left:3px; padding: 3px;margin-right:5px;width:68px;"/>
                            <input class="definition" type="button" value="提交" onclick="WebPreview.SetDefinition()"/>
                        </p>

                        <p class="volume">
                            <span style="margin-left:20px;">音量:</span>
                            <input type="number" id="vol" min="1" max="100" name="vol" onkeyup="WebPreview.limitInput(this);"
                                   style="margin-left:3px; padding: 3px;margin-right:5px;width:70px;"/>
                            <input class="volume" type="submit" value="提交" onclick="WebPreview.SetAudVolume()"/>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!--查询回放-->
        <div class="query" style="display: none; margin: 13px 0 0 5px; border: 1px solid #000;">
            <!--查询条件-->
            <div style="margin: 15px 0 0 5px;">
                <span>查询条件：</span>
                <select id="platformOrLocalSel">
                    <option value="平台" selected="selected">平台</option>
                    <option value="本地">本地</option>
                </select>
                <select id="viewOrPhotoSel">
                    <option value="录像" selected="selected">录像</option>
                    <option value="图片">图片</option>
                </select>
            </div>

            <!--本地日期-->
            <div class="dateInfo" style="float: left; padding: 20px 0 0 10px;">
                <span>日期</span>
                <!--日期-->
                <div class="dateList" style=" width: 200px; height: 400px;border: 1px solid #000;overflow: auto;">
                    <!--录像本地日期-->
                    <ul id="dateInfoVideoTree" class="filetree" style="overflow: auto;">

                    </ul>

                    <!--图片本地日期-->
                    <ul id="dateInfoPhotoTree" class="filetree" style="overflow: auto;">

                    </ul>

                    <!--录像日期-->
                    <ul id="dateInfoPlatTree" class="filetree" style="overflow: auto;">

                    </ul>

                    <!--图片日期-->
                    <ul id="dateInfoPhotoPlatTree" class="filetree" style="overflow: auto;">

                    </ul>

                </div>


            </div>

            <!--文件列表-->
            <div class="fileListInfo" style="float: left; margin-left: 20px; padding-top: 20px;">
                <span>文件列表</span>
                <div class="fileList" style=" width: 1100px; height: 400px;border: 1px solid #000;overflow: auto;">
                    <!--录像文件-->
                    <div class="dateInfoVideoTb" style="float: left; width: 100%; overflow: auto;">
                        <table id="tb_1" class="fileInfo table table-bordered">
                            <thead>
                            <tr class="headTr" style="border: 1px solid #BEC3CB;">
                                <th>
                                    序号
                                </th>
                                <th>
                                    文件名称
                                </th>
                                <th>
                                    文件大小
                                </th>
                                <th>
                                    开始时间
                                </th>
                                <th>
                                    结束时间
                                </th>
                                <th>
                                    录像标签
                                </th>
                                <th>
                                    摄像头
                                </th>
                                <th>
                                    存储位置
                                </th>
                            </tr>
                            </thead>
                            <tbody id="tb_1_tbody">

                            </tbody>
                        </table>
                    </div>

                    <!--图片文件-->
                    <div class="dateInfoPhotoTb" style="float: left; width: 100%; display: none; overflow: auto;">
                        <table id="tb_2" class="fileInfo table table-bordered">
                            <thead>
                            <tr class="headTr" style="border: 1px solid #BEC3CB;">
                                <th>
                                    序号
                                </th>
                                <th>
                                    文件名称
                                </th>
                                <th>
                                    文件大小
                                </th>
                                <th>
                                    抓拍时间
                                </th>
                                <th>
                                    图片标签
                                </th>
                                <th>
                                    摄像头
                                </th>
                                <th>
                                    存储位置
                                </th>
                            </tr>
                            </thead>
                            <tbody id="tb_2_tbody">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!--下载列表-->
            <div class="downloadListInfo" style="clear: both; padding: 20px 0 0 10px;">
                <span>下载列表</span>
                <div class="downloadList" style=" width: 1320px; margin-bottom: 3px; height: 310px;border: 1px solid #000;">
                    <table id="downloadManage_1" class="fileInfo table table-bordered">
                        <thead>
                        <tr class="headTr" style="border: 1px solid #BEC3CB;">
                            <th>
                                下载状态
                            </th>
                            <th>
                                文件名称
                            </th>
                            <th>
                                文件大小
                            </th>
                            <th>
                                进度
                            </th>
                            <th>
                                速度
                            </th>
                            <th>
                                剩余时间/已用时间
                            </th>
                            <th>
                                定位信息
                            </th>
                        </tr>
                        </thead>
                        <tbody id="downloadManage_1_tbody">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!--实时回放-->
        <div class="previewPlayback" style="display: none; margin: 13px 0 0 5px;">
            <div style="float: left; width: 65%">
                <div>
                    <div class="video videoPlayback" id="videoPlayback" style="">
                    </div>
                    <div class="video_progress" style="position: relative; padding-top: 35px; padding-bottom: 35px;">
                        <div>
                            <span class="startTime">00:00</span>
                            <span class="endTime" style="position: absolute; right: 0">5:00</span>
                        </div>

                        <a class="videoPreview_progress" href="javascript:;" style="display: inline-block;
                            width: 100%; height: 3px;background-color: #C2C2C2"></a>
                    </div>
                </div>

                <div style="padding-left: 5%;">
                    <div>
                        <span class="playbackInfo">
                            <span>开始回放时间:</span>
                            <span class="startPlaybackTimeUTC"></span>
                        </span>

                        <span class="playbackInfo">
                            <span>回放时间:</span>
                            <span class="playbackTimeUTC"></span>
                        </span>

                        <span class="playbackInfo">
                            <span>回放时长:</span>
                            <span class="playbackTime"></span>
                        </span>
                    </div>
                    <div>
                        <span class="playbackInfo">
                            <span>开始实时时间：</span>
                            <span class="startRealtimeUTC"></span>
                        </span>

                        <span class="playbackInfo">
                            <span>实时时间：</span>
                            <span class="realtimeUTC"></span>
                        </span>

                        <span class="playbackInfo">
                            <span>实时预览总时长：</span>
                            <span class="realtime"></span>
                        </span>

                    </div>
                </div>
            </div>
            <div style="float: left; width: 28%; margin-left: 2%;">
                <input type="button" value="关闭" onclick="WebPreview.stopPlaybackVideo()">
                <input type="button" value="切换到实时预览" onclick="WebPreview.jumpLatestPreview()">
                <div style="margin-top: 5%;" class="intro">
                    <div style="color: red; padding-bottom: 10px;">注释：</div>
                    <p>关闭按钮：关闭实时回放模块的视频。</p>
                    <p>切换到实时预览按钮：当点击进度条回放视频时，点击该按钮可以切换到实时预览状态。</p>
                    <p>进度条的数值：可回放视频的时间最大是5分钟。如果视频预览时间超过5分钟，
                        进度条的数值5：00更新为当前实时预览总时长，数值0:00更新为当前实时预览总时长减去5分钟。</p>
                    <p>回放时长：正在回放的视频的时间，单位为秒。</p>
                    <p>回放时间：正在回放的视频的时间。</p>
                    <p>实时预览总时长：从打开视频画面到当前实时视频画面的时间，单位为秒。</p>
                    <p>实时时间：当前实时视频画面的时间。</p>
                </div>
            </div>
        </div>

        <!--即时会话-->
        <div class="chatMsg" style="display: none; margin: 13px 0 0 5px;">
            <div style="float: left; width: 60%">
                <div id="msg" style="overflow:auto;padding:10px;width: 100%; height: 530px;border: 1px solid grey; margin-bottom: 2%">

                </div>
                <div id="chat">
                    <input placeholder="请输入发送对象用户名" id="sendUserName" style="width: 20%;height: 38px;">
                    <input placeholder="请输入发送内容" id="content" name="content" style="width: 65%;height: 38px;margin-left: 20px;">
                    <input value="发送" type="button" onclick="WebPreview.sendChatMsg()" style="width: 80px;height: 38px;margin-left: 20px;"/>
                </div>
            </div>

            <div style="float: left; width: 30%; margin-left: 2%;">
                <input type="button" value="登录即时会话" onclick="WebPreview.chatLogin()">
                <br/>
                <input type="button" value="退出即时会话" onclick="WebPreview.chatLogout()" style="margin-top: 2%">
            </div>
        </div>
    </div>

</div>
</div>
<!--右键视频回放下载等-->
<div id="tb_menu">
    <div class="tb_callback" style="width: 120px; height: 30px;">
            <span class="tb_callbackLeft" style="float: left; width: 40px; height: 30px; line-height: 30px;">
                <span style="display: inline-block; text-align: center; margin-top: 10px; vertical-align: middle; width: 16px; height: 16px;
                margin-right: 3px; background: url(Image/indexImage/QueryListMenu.png) no-repeat 0px 0px;"></span>
            </span>
        <span class="tb_callbackRight" style="float: left; width: 80px;height: 30px; line-height: 30px; text-align: center; vertical-align: middle;">
                <span class="tb_callbackRightText" style="margin-left: -30px; cursor: default;"></span>
            </span>
    </div>

    <div class="tb_download" style="width: 120px; height: 30px;">
            <span class="tb_downloadLeft" style="float: left; width: 40px; height: 30px; line-height: 30px;">
                <span style="display: inline-block; text-align: center; margin-top: 10px; vertical-align: middle; width: 16px; height: 16px;
                margin-right: 3px; background: url(Image/indexImage/QueryListMenu.png) no-repeat -16px 0px;"></span>
            </span>
        <span class="tb_downloadRight" style="float: left; width: 80px;height: 30px; line-height: 30px; text-align: center; vertical-align: middle;">
                <span class="tb_downloadRightText" style="margin-left: -30px; cursor: default;">下载</span>
            </span>
    </div>

    <div class="tb_delete" style="width: 120px; height: 30px;">
            <span class="tb_deleteLeft" style="float: left; width: 40px; height: 30px; line-height: 30px;">
                <span style="display: inline-block; margin-top: 10px; text-align: center; vertical-align: middle; width: 16px; height: 16px;
                margin-right: 3px; background: url(Image/indexImage/QueryListMenu.png) no-repeat -48px 0px;"></span>
            </span>

        <span class="tb_deleteRight" style="float: left; width: 80px;height: 30px; line-height: 30px; text-align: center; vertical-align: middle;">
                <span class="tb_deleteRightText" style="margin-left: -30px; cursor: default;">删除</span>
            </span>
    </div>
</div>

<!--视频播放窗口-->
<div id="dragVideo" style="display: none; z-index: 998;">
    <div class="resizeL" style="z-index: 998"></div>
    <div class="resizeT" style="z-index: 998"></div>
    <div class="resizeR" style="z-index: 998"></div>
    <div class="resizeB" style="z-index: 998"></div>
    <div class="resizeLT" style="z-index: 998"></div>
    <div class="resizeTR" style="z-index: 998"></div>
    <div class="resizeBR" style="z-index: 998"></div>
    <div class="resizeLB" style="z-index: 998"></div>

    <div class="dragVideo_header" style="position: relative;background: #364E6F; line-height: 28px; width: 100%;color: #B4C9D5;">
        <span style="display: inline-block; margin-left: 10px;">播放器 - </span>
        <span class="header_videoInfo"></span>
        <span class="header_equipName" style="display: none;"></span>
        <div>
            <a class="dragVideo_close" href="javascript:;" title="关闭"></a>
        </div>
    </div>

    <div class="dragVideo_content" style="border: 2px solid #000; height: 460px;">
        <div id="content_videoPlay" style="height: 456px;">

        </div>
    </div>

    <div class="dragVideo_bottom" style="background: #F5F6F7; height: 63px; width: 100%;">
        <div>
            <span class="video_state" style="display: inline-block; float: left; text-align: right; margin-left: 16px; margin-top: 8px; margin-right: -70px; color: #3458a0;">正在播放</span>
            <div class="bottom_progress" style="text-align: center;padding-top: 15px;">
                <a class="butt_progress" href="javascript:;" style="display: inline-block; margin-left: -8px; width: 70%; height: 3px;background-color: #C2C2C2"></a>
            </div>

            <span class="progress_time" style="display: inline-block; float: right; margin-top: -11px; margin-right: 10px; color: #3458a0;">--/--</span>
        </div>


        <div class="bottom_butt" style="position: relative;margin-top: 5px; margin-left: 20px;">
            <a class="butt_playOrPause butt_frond" title="播放/暂停"></a>
            <a class="butt_pauseToPlay butt_frond" title="播放/暂停" style="display: none;"></a>
            <a class="butt_pause butt_frond" title="停止播放"></a>
            <a class="butt_slow butt_frond" title="慢进"></a>
            <a class="butt_speed butt_frond" title="快进"></a>
            <a class="butt_playOrPauseAudioOne butt_frond" title="打开/关闭音频1"></a>
            <a class="butt_pauseToPlayAudioOne butt_frond" title="打开/关闭音频1" style="display: none;"></a>
            <a class="butt_playOrPauseAudioTwo butt_frond" title="打开/关闭音频2"></a>
            <a class="butt_pauseToPlayAudioTwo butt_frond" title="打开/关闭音频2" style="display: none;"></a>
            <a class="butt_snapshot butt_frond" title="抓拍"></a>
            <a class="butt_rotate butt_frond" title="经图像顺时针旋转90"></a>
            <a class="butt_fullScreen butt_frond" title="全屏"></a>

            <div class="volume_set" style="position: absolute;right: 35px; top: 1px;margin-top: 7px;">
                <a class="butt_volumeMute butt_later" title="将音量设置为静音" onclick="WebQuery.volumeMin()" style=" padding-top: 0px; margin-left: 30px;margin-right: 6px;"></a>

                <a class="butt_volumeControl butt_volume" href="javascript:;" title="50" style="position:relative; top: -6px;">

                </a>

                <a class="butt_volumeMax butt_later" title="将音量设置为最大" style="margin-left: 10px;" onclick="WebQuery.volumeMax()"></a>
            </div>

        </div>
    </div>
</div>

<!--右键下载 开始、暂停等-->
<div id="load_menu" style="display: none; z-index: 1000;">
    <div class="download_start" style="width: 140px; height: 30px;">
        <span class="download_startLeft" style="float: left; width: 40px; height: 30px; line-height: 30px;">
            <span style="display: inline-block; text-align: center; margin-top: 10px; vertical-align: middle; width: 16px; height: 16px;
            margin-right: 3px; background: url(Image/indexImage/QueryListMenu.png) no-repeat -64px 0px;"></span>
        </span>
        <span class="download_startRight" style="float: left; width: 100px;height: 30px; line-height: 30px; text-align: center; vertical-align: middle;">
            <span class="download_startRightText" style="margin-left: -60px; cursor: default;">开始</span>
        </span>
    </div>

    <div class="download_pause" style="width: 140px; height: 30px;">
        <span class="download_pauseLeft" style="float: left; width: 40px; height: 30px; line-height: 30px;">
            <span style="display: inline-block; text-align: center; margin-top: 10px; vertical-align: middle; width: 16px; height: 16px;
            margin-right: 3px; background: url(Image/indexImage/QueryListMenu.png) no-repeat -80px 0px;"></span>
        </span>
        <span class="download_pauseRight" style="float: left; width: 100px;height: 30px; line-height: 30px; text-align: center; vertical-align: middle;">
            <span class="download_pauseRightText" style="margin-left: -60px; cursor: default;">暂停</span>
        </span>
    </div>

    <div class="download_del" style="width: 140px; height: 30px;">
            <span class="download_delLeft" style="float: left; width: 40px; height: 30px; line-height: 30px;">
                <span style="display: inline-block; margin-top: 10px; text-align: center; vertical-align: middle; width: 16px; height: 16px;
                margin-right: 3px; background: url(Image/indexImage/QueryListMenu.png) no-repeat -48px 0px;"></span>
            </span>
        <span class="download_delRight" style="float: left; width: 100px;height: 30px; line-height: 30px; text-align: center; vertical-align: middle;">
                <span class="download_delRightText" style="margin-left: -60px; cursor: default;">删除</span>
            </span>
    </div>

    <div class="download_reStart" style="width: 140px; height: 30px;">
            <span class="download_reStartLeft" style="float: left; width: 40px; height: 30px; line-height: 30px;">
                <span style="display: inline-block; margin-top: 10px; text-align: center; vertical-align: middle; width: 16px; height: 16px;
                margin-right: 3px; background: url(Image/indexImage/QueryListMenu.png) no-repeat -96px 0px;"></span>
            </span>

        <span class="download_reStartRight" style="float: left; width: 100px;height: 30px; line-height: 30px; text-align: center; vertical-align: middle;">
                <span class="download_reStartRightText" style="margin-left: -30px; cursor: default;">重新开始</span>
            </span>
    </div>

    <iframe id="xActive_IframeLoadMenuEvent" src="javascript:false;" frameBorder=0 marginHeight=0 marginWidth=0 style="scrolling: no; position: absolute;
                  opacity: 0; top: 0px; left: 0px; bottom: 26px; height: 100%; width: 100%; z-Index: -1; allowTransparency:true; overflow: hidden;">
    </iframe>
</div>

<!--<script src="js/jquery.js"></script>-->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="ccplugin/NPCCEnum.js"></script>
<script type="text/javascript" src="ccplugin/NPCCErrorCode.js"></script>
<script type="text/javascript" src="ccplugin/NPCCStruct.js"></script>
<script type="text/javascript" src="ccplugin/NPCCUtils.js"></script>
<script type="text/javascript" src="ccplugin/NPCCInterface.js"></script>
<script type="text/javascript" src="ccplugin/NPCCInterlayer.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="preview.js"></script>
<script type="text/javascript" src="query.js"></script>
<script type="text/javascript" src="resourceTree.js"></script>
<script type="text/javascript" src="public.js"></script>
<script src="js/jquery.treeview.js"></script>
<!--select发生的change事件-->
<script>

    $('ul.opeNav li').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        var res = $(this).attr('href');
        $('.' + res).css('display', 'block').siblings().not('.opeNav').css('display', 'none');
    })

    function selChange() {
        var platformOrLocalSelectText = $("#platformOrLocalSel").find("option:selected").text();
        var viewOrPhotoSelectText = $("#viewOrPhotoSel").find("option:selected").text();
        if (platformOrLocalSelectText == "平台") {
            if (viewOrPhotoSelectText == '录像') {
                $('#dateInfoPhotoTree').css('display', 'none');
                $('#dateInfoVideoTree').css('display', 'none');
                $('#dateInfoPlatTree').css('display', 'block');
                $('#dateInfoPlatTree').html('');
                $('#dateInfoPhotoPlatTree').css('display', 'none');
                $('.dateInfoPhotoTb').css('display', 'none');
                $('.dateInfoVideoTb').css('display', 'block');
                $('#tb_1_tbody').html('');
            }
            else if (viewOrPhotoSelectText == '图片') {
                $('#dateInfoPhotoTree').css('display', 'none');
                $('#dateInfoVideoTree').css('display', 'none');
                $('#dateInfoPlatTree').css('display', 'none');
                $('#dateInfoPhotoPlatTree').css('display', 'block');
                $('#dateInfoPhotoPlatTree').html('');
                $('.dateInfoVideoTb').css('display', 'none');
                $('.dateInfoPhotoTb').css('display', 'block');
                $('#tb_2_tbody').html('');
            }
        }
        else {
            if (viewOrPhotoSelectText == '录像') {
                $('#dateInfoPhotoTree').css('display', 'none');
                $('#dateInfoVideoTree').css('display', 'block');
                $('#dateInfoPlatTree').css('display', 'none');
                $('#dateInfoPhotoPlatTree').css('display', 'none');
                $('.dateInfoPhotoTb').css('display', 'none');
                $('.dateInfoVideoTb').css('display', 'block');
                $('#tb_1_tbody').html('');
                if (WebPreview.isOrNotLocalRecord == 1) {
                    $('#dateInfoVideoTree').html('');
                    $('#tb_1_tbody').html('');
                    //本地录像树
                    WebQuery.localVideoDateInfo([], WebClient.strDir);
                    WebPreview.isOrNotLocalRecord = 0;
                }
            }
            else if (viewOrPhotoSelectText == '图片') {
                $('#dateInfoPhotoTree').css('display', 'block');
                $('#dateInfoVideoTree').css('display', 'none');
                $('#dateInfoPlatTree').css('display', 'none');
                $('#dateInfoPhotoPlatTree').css('display', 'none');
                $('.dateInfoVideoTb').css('display', 'none');
                $('.dateInfoPhotoTb').css('display', 'block');
                $('#tb_2_tbody').html('');
                if (WebPreview.isOrNotLocalSnapshot == 1) {
                    $('#dateInfoPhotoTree').html('');
                    $('#tb_2_tbody').html('');
                    //本地图片树
                    WebQuery.localPhotoDateInfo([], WebClient.strDir);
                    WebPreview.isOrNotLocalSnapshot = 0;
                }
            }
        }
    }
    // 判断平台或本地
    $('#platformOrLocalSel').change(function () {
        selChange();
    });

    // 判断录像或图片
    $('#viewOrPhotoSel').change(function () {
        selChange();
    });

    $('.previewLi').click(function() {
        if ($('#dragVideo').css('display') == 'block') {
            WebQuery.visibleVideo();
        }
    })
</script>

<!--拖动表格改变大小-->
<script>
    function setUpdateWid(id) {
        var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
        var table = document.getElementById(id);
        // var table = document.getElementsByClassName('fileInfo')[0];
        for (j = 0; j < table.rows[0].cells.length; j++) {
            table.rows[0].cells[j].onmousedown = function () {
                //记录单元格
                tTD = this;
                if (event.offsetX > tTD.offsetWidth - 10) {
                    tTD.mouseDown = true;
                    tTD.oldX = event.x;
                    tTD.oldWidth = tTD.offsetWidth;
                }
                //记录Table宽度
                //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;
                //tTD.tableWidth = table.offsetWidth;
            };

            table.rows[0].cells[j].onmouseup = function () {
                //结束宽度调整
                if (tTD == undefined) tTD = this;
                tTD.mouseDown = false;
                tTD.style.cursor = 'default';
            };
            table.rows[0].cells[j].onmousemove = function () {
                //更改鼠标样式
                if (event.offsetX > this.offsetWidth - 10)
                    this.style.cursor = 'col-resize';
                else
                    this.style.cursor = 'default';
                //取出暂存的Table Cell
                if (tTD == undefined) tTD = this;
                //调整宽度
                if (tTD.mouseDown != null && tTD.mouseDown == true) {
                    tTD.style.cursor = 'default';
                    if (tTD.oldWidth + (event.x - tTD.oldX)>0)
                        tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
                    //调整列宽
                    tTD.style.width = tTD.width;
                    tTD.style.cursor = 'col-resize';
                    //调整该列中的每个Cell
                    table = tTD; while (table.tagName != 'TABLE') table = table.parentElement;
                    for (j = 0; j < table.rows.length; j++) {
                        table.rows[j].cells[tTD.cellIndex].width = tTD.width;
                    }
                }
            };
        }
    }

    setUpdateWid('tb_1');
    setUpdateWid('tb_2');
    setUpdateWid('downloadManage_1');
</script>
</body>
</html>